import React from 'react'
import {Icon} from "antd-mobile"
import "./login.css"
import { getCheckoutImg,getLogin } from "../../api/index"
import { Button,Toast} from 'antd-mobile';
import Header from "../header/index"
class Login extends React.Component{
   constructor(){
       super()
       this.state={
           imgUrl:"",
           username:"",
           password:"",
           checkoutcode:"",
       }
   }
   componentDidMount(){
    getCheckoutImg().then(res=>{
        this.setState({
            imgUrl:res.data.code
        })
    })
   }
   changeImg(){
            getCheckoutImg().then(res=>{
                this.setState({
                    imgUrl:res.data.code
                })
            })
   }
   usnHandler(e){
        this.setState({
            username:e.target.value
        })
   }
   psdHandler(e){
        this.setState({
            password:e.target.value
        })
   }
   codeHandler(e){
    this.setState({
        checkoutcode:e.target.value
    })
   }
   submitHandler(){
        if(!this.state.username){
            Toast.fail("请输入账号名", 1);
            return
        }else if(!this.state.password){
            Toast.fail("请输入密码", 1);
            return
        }else if(!this.state.checkoutcode){
            Toast.fail("请输入验证码", 1);
            return
        }
        if(this.state.username ||this.state.password ||this.state.checkoutcode){
            console.log(this.state.username,"=========",this.state.username,"===========",parseFloat(this.state.checkoutcode) )
            getLogin({username:this.state.username,password:this.state.password,captcha_code:this.state.checkoutcode}).then(res=>{
                console.log(res)
                // if(res.status){
                //     this.props.history.push("/app/mine")
                // }
                if(res.data.status){
                    Toast.fail("验证码过期", 1);
                    return
                }else{
                    this.props.history.push("/app/mine")
                }
            })
        }
   }
   goback(){
    // console.log(11)
    this.props.history.go(-1)
   }
   editPassword(){
    this.props.history.push("/forget")
   }
   render(){
       return(
           <div className="login">
                 <Header title={"登陆"}/>
                 <div className="login-main">
                     <div className="login-main_input">
                         <div className="main—input_item">
                              <div className="login-icon-userName"></div><input type="text" value={this.state.username} className="login-userName" placeholder="账号" onChange={this.usnHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                               <div className="login-icon-password"></div><input type="text" value={this.state.password} className="login-password" placeholder="密码"  onChange={this.psdHandler.bind(this)}/>
                         </div>
                         <div className="main—input_item">
                              <input type="text" className="login-checkoutCode" placeholder="验证码" value={this.state.checkoutcode}  onChange={this.codeHandler.bind(this)}/>
                              <div className="checkoutImgWrap">
                                   <img  src={this.state.imgUrl}/>
                                   <div className="checkoutImg-Rewrite">
                                       <span>看不清</span>
                                        <a href="javascript:;" className="changeImg" onClick={this.changeImg.bind(this)}>换一张</a>
                                   </div>
                              </div>
                         </div>
                     </div>
                 </div>
                 <p className="login-tips">
                     温馨提示：未注册过的账号，登录时将自动注册
                 </p>
                 <p className="login-tips">        
                     注册过的用户可凭账号密码登录
                 </p>
                 <Button className="login-submit" onClick={this.submitHandler.bind(this)}>登陆</Button>
                 <a className="editPassword" onClick={this.editPassword.bind(this)}>重置密码?</a>

           </div>
       )
   }
}


export default Login